<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <el-tabs>
        <el-tab-pane label="角色管理" >
          <!-- 新增角色 -->
            <el-row style=" height: 60px ">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="showDialog = true">
                新增角色
              </el-button>
            </el-row>
          <!-- 新增角色 -->
          <!-- 表格 -->
            <el-table
              border
              :data="list"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="120">
              </el-table-column>
              <el-table-column
                label="名称"
                prop="name"
                width="240">
              </el-table-column>
              <el-table-column
                prop="description"
                label="描述">
              </el-table-column>
              <el-table-column
                label="操作"
                width="240">
                <template slot-scope="{ row }">
                  <el-button type="success" size="small" @click="assignPerm(row.id)">分配权限</el-button>
                  <el-button type="primary" size="small" @click="editRoleInf(row.id)">编辑</el-button>
                  <el-button type="danger" size="small" @click="deleteRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height:60px "
            >
              <el-pagination
                :current-page="page.page"
                :page-size="page.pagesize"
                :total="page.total"
                @current-change="changePage"
                layout="prev, pager, next">
              </el-pagination>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="公司信息" >配置管理</el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="编辑人员信息" :visible.sync="showDialog">
      <el-form :model="roleForm"  ref="roleForm" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" ></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleForm.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配权限 -->
    <el-dialog title="分配权限" :visible="showPermDialog" >
      <el-tree
        ref="permTree"
        :data="permData"
        :props="defaultProps"
        :show-checkbox="true"
        :check-strictly="true"
        :default-expand-all="true"
        :default-checked-keys="selectCheck"
        node-key="id"
      />
      <!-- 确定 取消 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnPermOK">确定</el-button>
          <el-button size="small" @click="btnPermCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getRoleList , deleteRole , updateRole, getRoleDetail, addRole , assignPerm} from "@/api/setting"
import { getPermissionList } from '@/api/permission'
import { tranListToTreeData } from "@/utils/index";
export default {
  data() {
    return {
      defaultProps: {
          label: 'name'
        },
      list: [],
      page: {
        page: 1,
        pagesize: 5,
        total: 0,
      },
      showDialog: false,
      showPermDialog:false,
      roleForm: {
      },
      rules: {
        name: [
          { required: true, $message: "角色名称不能为空", trigger: "blur" },
        ]
      },
      permData: [],
      roleId: null,
      selectCheck: [],
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList () {
      let {total , rows } = await getRoleList(this.page);
      this.list = rows ;
      this.page.total = total;
    },
    // 换页
    changePage(newpage) {
      this.page.page = newpage;
      this.getRoleList();
    },
    // 删除
    async deleteRole(id) {
      try {
        await this.$confirm("确定要删除吗？");
        await deleteRole(id);
        this.getRoleList();
        this.$message.success("删除角色成功");
      } catch {
        console.log("error");
      }
      
    },
    async editRoleInf(id) {
      
      this.roleForm = await getRoleDetail(id)
      this.showDialog = true;
    },
    // 确认按钮
     async btnOk () {
    try {
      await this.$refs.roleForm.validate();
      if(this.roleForm.id) { // 编辑
        await updateRole(this.roleForm)
      } else { // 增加
        await addRole(this.roleForm)
      }
        this.getRoleList();
        this.$message.success("操作成功");
        this.showDialog = false;
        this.roleForm = {};
    } catch (error) {

    }
  },
  // 取消按钮
  cancel () {
    this.showDialog = false;
    this.roleForm = {};
  },
  // 分配权限
  async assignPerm(id) {
    this.permData = tranListToTreeData( await getPermissionList(), '0')
     this.roleId = id;
      // 获取选中的权限
      const { permIds } = await getRoleDetail(id);
      this.selectCheck = permIds;
    this.showPermDialog = true;
  },
  async btnPermOK () {
    await assignPerm({ permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId });
    this.$message.success('分配权限成功');
    this.showPermDialog = false;
  },
  btnPermCancel () {
    this.selectCheck = [];
    this.showDialog = false;
  }
  },
  
};
</script>
<style scoped></style>